<script setup lang='ts'>
interface Props {
  si: number,
  ci: string
}
defineOptions({ name: 'AppSportsPageSportOutrightList' })
const props = defineProps<Props>()

const route = useRoute()

const params = computed(() => ({ si: props.si, kind: 'outright' }))
const pgid = computed(() => route.query.pgid?.toString() ?? '')
const { data: competitionListData, run, runAsync } = useRequest(ApiSportCompetitionList)
/** 定时更新数据 */
const { startTimer, stopTimer } = useSportsDataUpdate(() => run(params.value))

const outrightList = computed(() => {
  if (competitionListData.value && competitionListData.value.list)
    return competitionListData.value.list.filter((a) => props.ci ? a.pgid === pgid.value : a.pgid)

  return []
})

watch(() => props.si, (a) => {
  if (a !== 0)
    run(params.value)
})

onActivated(() => {
  startTimer()
})
onDeactivated(() => {
  stopTimer()
})
onBeforeUnmount(() => {
  stopTimer()
})

await application.allSettled([runAsync(params.value)])
</script>

<template>
  <div>
    <!-- 地区 -->
    <AppSportsOutrightRegion v-for="region, i in outrightList" :isOpen="i === 0" :key="region.pgid" :si="si"
      :data="region" />

    <AppSportsEmpty v-if="outrightList.length === 0" />
  </div>
</template>

<style lang='scss' scoped></style>
